<!--客户列表-->
<template>
  <div class="index-lists">
    <el-card class="!border-none" shadow="never">
      <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="查询条件" name="1">
            <el-form-item label="客户名称(中)" prop="customerNameChinese">
              <el-input class="w-[280px]" v-model="queryParams.name" />
            </el-form-item>
            <!-- <el-form-item label="客户名称(英)" prop="customerNameEnglish">
<el-input
class="w-[280px]"
v-model="queryParams.customerNameEnglish"
/>
</el-form-item> -->
            <el-form-item label="客户代码" prop="customerCode">
              <el-input class="w-[280px]" v-model="queryParams.id" />
            </el-form-item>
            <el-form-item label="客户来源" prop="customerSource">
              <el-input class="w-[280px]" v-model="queryParams.companyName" />
            </el-form-item>
            <el-form-item label="业务人员" prop="businessPersonnel">
              <el-input class="w-[280px]" v-model="queryParams.servicer" />
            </el-form-item>
            <el-form-item label="客户等级" prop="clientGrade">
              <el-select v-model="queryParams.clientGrade" class="w-[280px]" clearable>
                <el-option label="1" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="委托业务" prop="caseType">
              <el-select
                v-model="queryParams.caseType"
                placeholder="请选择委托业务"
                class="flex-1 w-[280px]"
                clearable
                multiple
              >
                <template #label="{ label, value }">
                  <span>{{ label }}: </span>
                  <span style="font-weight: bold">{{ value }}</span>
                </template>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="公司负责人" prop="customerNameChinese">
              <el-input class="w-[280px]" v-model="queryParams.customerNameChinese" />
            </el-form-item>
            <el-form-item label="创建人" prop="basicsCreateName">
              <el-input class="w-[280px]" v-model="queryParams.basicsCreateName" />
            </el-form-item>
            <el-form-item label="协作人" prop="associates">
              <el-input class="w-[280px]" v-model="queryParams.associates" />
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="进阶查询" name="2">
            <el-form-item label="客户名称(中)" prop="customerNameChinese">
              <el-input class="w-[280px]" v-model="queryParams.customerNameChinese" />
            </el-form-item>
            <el-form-item label="所属行业" prop="industryInvolved">
              <el-input class="w-[280px]" v-model="queryParams.industryInvolved" />
            </el-form-item>
            <el-form-item label="业务合作" prop="businessCooperation">
              <el-input class="w-[280px]" v-model="queryParams.businessCooperation" />
            </el-form-item>
            <el-form-item label="业务助理" prop="businessAssistant">
              <el-input class="w-[280px]" v-model="queryParams.businessAssistant" />
            </el-form-item>
            <el-form-item label="流程人员" prop="processPersonnel">
              <el-input class="w-[280px]" v-model="queryParams.processPersonnel" />
            </el-form-item>
            <el-form-item label="所属分部" prop="subdivision">
              <el-input class="w-[280px]" v-model="queryParams.subdivision" />
            </el-form-item>
            <el-form-item label="客户签约日期" prop="contractedCustomerTime">
              <el-input class="w-[280px]" v-model="queryParams.contractedCustomerTime" />
            </el-form-item>
            <el-form-item label="成交状态" prop="makebargainStatus">
              <el-select v-model="queryParams.makebargainStatus" class="w-[280px]" clearable>
                <el-option label="是" value="1" />
                <el-option label="否" value="2" />
              </el-select>
            </el-form-item>

            <!-- <el-form-item label="协作人编号" prop="associatesId">
<el-input
class="w-[280px]"
v-model="queryParams.associatesId"
/>
</el-form-item> -->

            <el-form-item label="代理等级" prop="agencyGrade">
              <el-select v-model="queryParams.agencyGrade" class="w-[280px]" clearable>
                <el-option label="请选择字典生成" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="客户规模" prop="customerSize">
              <el-input class="w-[280px]" v-model="queryParams.customerSize" />
            </el-form-item>

            <el-form-item label="联系方式" prop="contactInformation">
              <el-input class="w-[280px]" v-model="queryParams.contactInformation" />
            </el-form-item>
            <el-form-item label="联系人名称" prop="nickname">
              <el-input class="w-[280px]" v-model="queryParams.nickname" />
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input class="w-[280px]" v-model="queryParams.phone" />
            </el-form-item>
            <el-form-item label="保密等级" prop="confidentialityGrade">
              <el-select v-model="queryParams.confidentialityGrade" class="w-[280px]" clearable>
                <el-option label="请选择字典生成" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="客户镇区" prop="customerTownship">
              <el-input class="w-[280px]" v-model="queryParams.customerTownship" />
            </el-form-item>
            <el-form-item label="客户园区" prop="customerGarden">
              <el-input class="w-[280px]" v-model="queryParams.customerGarden" />
            </el-form-item>
            <el-form-item label="客户类型" prop="customerType">
              <el-select v-model="queryParams.customerType" class="w-[280px]" clearable>
                <el-option label="1" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="纳税人识别号(信用代码)" prop="identificationNumberTaxpayer">
              <el-input class="w-[280px]" v-model="queryParams.identificationNumberTaxpayer" />
            </el-form-item>
            <el-form-item label="年度销售收入" prop="annualSalesRevenue">
              <el-input class="w-[280px]" v-model="queryParams.annualSalesRevenue" />
            </el-form-item>
            <el-form-item label="总资产" prop="totalAssets">
              <el-input class="w-[280px]" v-model="queryParams.totalAssets" />
            </el-form-item>
            <el-form-item label="国家(地区)" prop="nation">
              <el-input class="w-[280px]" v-model="queryParams.nation" />
            </el-form-item>
            <el-form-item label="省份" prop="province">
              <el-input class="w-[280px]" v-model="queryParams.province" />
            </el-form-item>
            <el-form-item label="城市(中文)" prop="cityChinese">
              <el-input class="w-[280px]" v-model="queryParams.cityChinese" />
            </el-form-item>
            <el-form-item label="行政区划" prop="administrativeDivision">
              <el-input class="w-[280px]" v-model="queryParams.administrativeDivision" />
            </el-form-item>
            <el-form-item label="专利数量" prop="patentQuantity">
              <el-input class="w-[280px]" v-model="queryParams.patentQuantity" />
            </el-form-item>
            <el-form-item label="商标数量" prop="numberOfTrademarks">
              <el-input class="w-[280px]" v-model="queryParams.numberOfTrademarks" />
            </el-form-item>
            <el-form-item label="版权数量" prop="copyrightNumber">
              <el-input class="w-[280px]" v-model="queryParams.copyrightNumber" />
            </el-form-item>
            <el-form-item label="跟进时间" prop="followUpTime">
              <el-input class="w-[280px]" v-model="queryParams.followUpTime" />
            </el-form-item>
            <!-- <el-form-item label="X天未跟进id" prop="unfollowedId">
<el-input
class="w-[280px]"
v-model="queryParams.unfollowedId"
/>
</el-form-item>
<el-form-item label="X天未跟进" prop="unfollowed">
<el-input class="w-[280px]" v-model="queryParams.unfollowed" />
</el-form-item> -->
            <!-- <el-form-item label="修改人编号" prop="updateUserId">
<el-input
class="w-[280px]"
v-model="queryParams.updateUserId"
/>
</el-form-item> -->
          </el-collapse-item>
        </el-collapse>

        <el-form-item class="el-form-item-button">
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button type="primary" @click="resetParams">重置</el-button>

          <el-button type="primary">
            <template #icon>
              <icon name="el-icon-download" />
            </template>
            导出
          </el-button>
          <el-button type="primary">
            <template #icon>
              <icon name="el-icon-upload" />
            </template>
            导入
          </el-button>

          <el-button type="primary">
            <template #icon>
              <icon name="el-icon-Avatar" />
            </template>
            修改业务员
          </el-button>
          <el-button type="primary">
            <template #icon>
              <icon name="local-icon-shouyiren" />
            </template>
            修改业务助理
          </el-button>
          <el-button type="primary">
            <template #icon>
              <icon name="local-icon-set_user" />
            </template>
            修改流程人员
          </el-button>
          <el-button type="primary">
            <template #icon>
              <icon name="local-icon-gongyingshang" />
            </template>
            修改客户等级
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <div>
        <router-link
          style="margin-right: 10px"
          :to="{
            path: getRoutePath('client:clientData:addClient'),
            query: {
              status: FormEnum.ADD
            }
          }"
        >
          <el-button v-perms="['client:clientData:addClient']" type="primary">
            <template #icon>
              <icon name="el-icon-Plus" />
            </template>
            新增客户
          </el-button>
        </router-link>
      </div>
      <el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists" stripe>
        <el-table-column type="selection" width="55" />
        <el-table-column label="ID" prop="id" min-width="50" />
        <el-table-column label="客户名称" sortable prop="name" min-width="130">
          <template #default="{ row }">
            <router-link
              style="color: #c9161b"
              :to="{
                path: getRoutePath('clientList:listinfo'),
                query: {
                  id: row.id
                }
              }"
            >
              {{ row.name }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="内部案源人" prop="internalSource" min-width="180" />
        <el-table-column label="业务人员" prop="servicer" min-width="180" />
        <el-table-column label="顾问成分比例" prop="" min-width="180" />
        <el-table-column label="成交状态" prop="makebargainStatus" min-width="180" />
        <el-table-column label="联系电话" prop="phone" min-width="180" />
        <el-table-column label="邮件" prop="email" min-width="180" />
        <el-table-column label="联系人" prop="nickname" min-width="180" />
        <el-table-column label="客户代码" prop="customerCode" min-width="180" />
        <el-table-column label="外部案源人" prop="externalCaseSource" min-width="180" />
        <el-table-column label="创建日期" prop="basicsCreateTime" min-width="180" />
        <el-table-column label="协作人" prop="associates" min-width="180" />
        <el-table-column label="客户编号" prop="" min-width="180" />

        <el-table-column label="客户名称(英)" prop="nameEnglish" min-width="180" />
        <el-table-column label="公司名称" prop="companyName" min-width="180" />
        <el-table-column label="公司负责人" prop="companyOfficials" min-width="180" />
        <el-table-column label="所属行业" prop="industryInvolved" min-width="180" />
        <el-table-column label="业务合作" prop="businessCooperation" min-width="180" />
        <el-table-column label="业务助理" prop="businessAssistant" min-width="180" />
        <el-table-column label="流程人员" prop="processPersonnel" min-width="180" />
        <el-table-column label="所属分部" prop="subdivision" min-width="180" />
        <el-table-column label="客户签约日期" prop="contractedCustomerTime" min-width="180" />
        <el-table-column label="创建人" prop="basicsCreateName" min-width="180" />
        <el-table-column label="案源公司" prop="caseSourceCompany" min-width="180" />
        <el-table-column label="代理等级" prop="agencyGrade" min-width="180" />
        <el-table-column label="客户规模" prop="customerSize" min-width="180" />
        <el-table-column label="非主力代理人" prop="nonPrincipalAgent" min-width="180" />
        <el-table-column label="更新人员" prop="uploadsUserName" min-width="180" />
        <el-table-column label="修改时间" prop="uploadsTime" min-width="180" />
        <el-table-column label="客户系统ip" prop="clientIp" min-width="180" />
        <el-table-column label="客户系统账号" prop="clientAccount" min-width="180" />
        <el-table-column label="备注" prop="remark" min-width="180" />
        <el-table-column label="联系方式" prop="contactInformation" min-width="180" />
        <el-table-column label="传真" prop="fax" min-width="180" />
        <el-table-column label="邮编" prop="postcode" min-width="180" />
        <el-table-column label="客户等级" prop="clientGrade" min-width="180" />
        <el-table-column label="信誉等级" prop="reputationGrade" min-width="180" />
        <el-table-column label="保密等级" prop="confidentialityGrade" min-width="180" />
        <el-table-column label="客户来源" prop="customerSource" min-width="180" />
        <el-table-column label="客户镇区" prop="customerTownship" min-width="180" />
        <el-table-column label="客户园区" prop="customerGarden" min-width="180" />
        <el-table-column label="客户类型" prop="customerType" min-width="180" />
        <el-table-column label="内部案源人电话" prop="internalSourcePhone" min-width="180" />
        <el-table-column label="内部案源人邮箱" prop="internalSourceEmail" min-width="180" />
        <el-table-column label="外部案源人电话" prop="externalCasePhone" min-width="180" />
        <el-table-column label="外部案源人邮箱" prop="externalCaseEmail" min-width="180" />
        <el-table-column label="案源类型" prop="sourceType" min-width="180" />
        <el-table-column label="账单地址" prop="billingAddress" min-width="180" />
        <el-table-column label="缴费抬头" prop="paymentTitle" min-width="180" />
        <el-table-column
          label="纳税人识别号(信用代码)"
          prop="identificationNumberTaxpayer"
          min-width="180"
        />
        <el-table-column label="发票抬头" prop="invoiceTitle" min-width="180" />
        <el-table-column label="开户银行" prop="depositBank" min-width="180" />
        <el-table-column label="银行账号" prop="bankAccount" min-width="180" />
        <el-table-column label="年度销售收入" prop="annualSalesRevenue" min-width="180" />
        <el-table-column label="一般纳税人" prop="generalTaxpayer" min-width="180" />
        <el-table-column label="代理费折扣率" prop="agencyDiscountRate" min-width="180" />
        <el-table-column label="开户名称" prop="accountName" min-width="180" />
        <el-table-column label="总资产" prop="totalAssets" min-width="180" />
        <el-table-column label="电话信息" prop="phoneInfo" min-width="180" />
        <el-table-column label="国家(地区)" prop="nation" min-width="180" />
        <el-table-column label="省份" prop="province" min-width="180" />
        <el-table-column label="城市(中文)" prop="cityChinese" min-width="180" />
        <el-table-column label="行政区划" prop="administrativeDivision" min-width="180" />
        <el-table-column label="经营地址" prop="businessAddress" min-width="180" />
        <el-table-column label="经营电话" prop="businessPhone" min-width="180" />
        <el-table-column label="地址" prop="addressChinese" min-width="180" />
        <el-table-column label="英文地址" prop="addressEnglish" min-width="180" />
        <el-table-column label="其他地址" prop="additionalAddress" min-width="180" />
        <el-table-column label="专利数量" prop="patentQuantity" min-width="180" />
        <el-table-column label="商标数量" prop="numberOfTrademarks" min-width="180" />
        <el-table-column label="版权数量" prop="copyrightNumber" min-width="180" />
        <el-table-column label="评估依据" prop="evaluationBasis" min-width="180" />
        <el-table-column label="跟进时间" prop="followUpTime" min-width="180" />
        <el-table-column label="创建时间" prop="createTime" min-width="180" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <div class="space-x-2">
              <el-button v-perms="['client:clientData:editClient']" type="primary" link>
                <router-link
                  :to="{
                    path: getRoutePath('client:clientData:editClient'),
                    query: {
                      id: row.id,
                      status: FormEnum.EDIT
                    }
                  }"
                >
                  修改
                </router-link>
              </el-button>
              <el-button type="primary" link>
                <router-link
                  :to="{
                    path: getRoutePath('client:clientData:matchItem'),
                    query: { id: row.id, tab: 1 }
                  }"
                >
                  匹配政策
                </router-link>
              </el-button>
              <el-button
                v-perms="['client:clientData:deleteClient']"
                type="danger"
                link
                @click="onDeleteCustomer(row)"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-4">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
    <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
  </div>
</template>
<script lang="ts" setup>
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import { customerDelete, customerLists } from '@/api/customer/customer'
import { getRoutePath } from '@/router'
import { FormEnum } from '@/enums/appEnums'

const activeNames = ['1']
const showEdit = ref(false)
const queryParams = reactive({
  id: '',
  code: '',
  name: '',
  subordinateCompanies: '',
  department: '',
  servicer: '',
  supportStaff: '',
  registrationDate: '',
  registeredFund: '',
  registeredType: '',
  technosphere: '',
  companyName: '',
  clientGrade: ''
})

const caseType = ref<string[]>(['Option1'])
const options = [
  {
    value: '1',
    label: '专利'
  },
  {
    value: '2',
    label: '商标'
  },
  {
    value: '3',
    label: '版权'
  },
  {
    value: '4',
    label: '科技服务'
  },
  {
    value: '5',
    label: '法律案件'
  },
  {
    value: '6',
    label: '调查案'
  }
]

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: customerLists,
  params: queryParams
})

/**
 * 删除客户
 * @param customer
 */
function onDeleteCustomer(customer: any) {
  feedback.confirm(`确定要删除客户: ${customer.name}？`).then(() => {
    customerDelete({ id: customer.id }).then(() => {
      feedback.msgSuccess('删除成功')
      getLists()
    })
  })
}

getLists()
</script>
<style scoped>
.formEdit .el-form-item {
  width: 590px;
}

::v-deep .el-collapse-item__header {
  padding-left: 54px;
  background-color: var(--el-bg-color-collapse);
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-collapse);
}

::v-deep .el-collapse-item__wrap {
  padding-top: 40px;
}

.el-form-item-button {
  margin-top: 20px;
}

.collapseClass {
  margin-top: 20px;
}
</style>
